<template>
	<view class="container">
		<view class="box">
			<view class="box-one">模板名称</view>
			<view class="box-two">
				<u-input
					v-model="tempInfo.title"
					placeholder="模版名称"
					disabled
				></u-input>
			</view>
		</view>
		<view class="box">
			<view class="box-one">模板介绍</view>
			<view class="box-two">
				<u-textarea
					autoHeight
					v-model="tempInfo.intro"
					placeholder="模板介绍"
					disabled
				></u-textarea>
			</view>
		</view>
		<view class="box">
			<view class="box-one">模板价格</view>
			<view class="box-two">
				<u-input v-model="tempInfo.price" placeholder="模板价格" disabled>
					<template slot="prefix">
						<text  style="color: #999;">￥</text>
					</template>
					<template slot="suffix">
						<text style="color: #999;">元</text>
					</template>
				</u-input>
			</view>
		</view>
		<view class="box">
			<view class="box-one">模板续费价格</view>
			<view class="box-two">
				<u-input v-model="tempInfo.price" placeholder="模板续费价格" disabled>
					<template slot="prefix">
						<text  style="color: #999;">￥</text>
					</template>
					<template slot="suffix">
						<text style="color: #999;">元</text>
					</template>
				</u-input>
			</view>
		</view>
		
		<u-button @click="payMoney"  :customStyle="{marginTop: '60px'}" type="primary" text="续费"></u-button>
		<u-popup :show="show" @close="close" @open="open" mode="center" :safeAreaInsetBottom='false' :closeable='true' :closeOnClickOverlay="false">
		            <view style="padding: 20rpx;width: 540rpx;height: 600rpx;">
		               <view class="" style="font-weight: 700;text-align: center;margin-bottom: 20rpx;">
		               	模板续费
		               </view>
					  
					   <view class="" style="display: flex;align-items: center;justify-content: center;">
						   <uv-qrcode   ref="qrcode" size="220px" :value="codeUrl"></uv-qrcode>
					   </view>
					   <view class="" style="margin-top: 20rpx;text-align: center;">
					   	微信扫一扫中选择此二维码用于支付
					   </view>
					   <u-button @click="onLongPress"  :customStyle="{marginTop: '60px'}" type="primary" text="下载二维码"></u-button>
		            </view>
				</u-popup>
	</view>
</template>

<script>
	import {getUserTemplateConf,templatePay} from '../../../utils/api.js'
export default {
	data() {
		return {
			show: false,
			tempInfo:{},
			codeUrl:'',
			imageurl:'',
			radiolist1: [{
			            name: '一年',
			            disabled: false
			          },
			            {
			              name: '三年',
			              disabled: false
			            },
			            {
			              name: '五年',
			              disabled: false
			            }, {
			              name: '永久',
			              disabled: false
			            }
			          ],
			          radiovalue1: '一年',
		};
	},
	onLoad() {
		this.getTempInfo()
	},
	methods: {
		 open() {
		        },
		        close() {
		          this.show = false
		        },
		 groupChange(n) {
		        console.log('groupChange', n);
		      },
		      radioChange(n) {
		        console.log('radioChange', n);
		      },
		getTempInfo(){
			let data={
				userServiceToken:uni.getStorageSync('userInfo').userServiceToken
			}
			getUserTemplateConf(data).then((res=>{
				if(res.code==200){
					this.tempInfo=res.body
				}
			}))
		},
		payMoney(){
			uni.showLoading({
				title: '加载中...',
				mask: true
			});
			let data={
				templateId:this.tempInfo.id
			}
			templatePay(data).then(res=>{
				if(res.code==200){
					uni.hideLoading();
					this.codeUrl=res.body
					this.show = true
				}
			})
		},
		onLongPress() {
			uni.showLoading({
				title: '下载中...',
				mask: true
			});
		      this.$refs.qrcode.save({
		       success: (res) => {
				  uni.hideLoading();
				  this.show = false;
				  uni.showToast({
				  	title:'下载成功'
				  })
		         console.log(res);
		       }
		      });
		      },
			  
		
	}
};
</script>

<style lang="scss" scoped>
.container {
	padding: 48rpx;
}
.box {
	margin-bottom: 20rpx;
	.box-one {
		font-family: Source Han Sans;
		font-size: 28rpx;
		margin-bottom: 20rpx;
		font-weight: 700;
	}
	.box-two {
	}
}
</style>
